/*
 * @Author: GuitarXiaohe 2205227953@qq.com
 * @Date: 2024-01-26 20:58:31
 * @LastEditors: GuitarXiaohe 2205227953@qq.com
 * @LastEditTime: 2024-02-03 21:34:53
 * @FilePath: \umi_demo\src\components\xh-components\xh-form\index.jsx
 * @Description:
 *
 * const [form] = Form.useForm();
const formItemList = [
	{
		name: 'test',
		label: '测试 label',
		labelwidth: 50,
		labelAlign: 'left',
		wrapperwidth: '45%',
		rules: [
			{
				required: true,
				message: '请填写内容',
			},
		],
	}，

];
 *
 *
 *
 *
 */
import React from "react";
import { Form, Input } from "antd";

const XHform = (props) => {
  const { formItemList = [], ...formProps } = props;

  return (
    <>
      <Form
        style={{
          display: "flex",
          justifyContent: "space-between",
          flexWrap: "wrap",
        }}
        colon={false}
        {...formProps}
      >
        {formItemList.map((item, idx) => {
          const { render, labelwidth, wrapperwidth, ...otherItem } = item;
          return (
            <Form.Item
              {...otherItem}
              key={String(idx)}
              label={
                item.label ? (
                  <div style={{ width: labelwidth }}>
                    {item.label}
                    {item.colon === false ? "" : "："}
                  </div>
                ) : (
                  ""
                )
              }
              style={{
                width: wrapperwidth,
                marginBottom: 16,
                ...(item.style || {}),
              }}
            >
              {render ? render() : <Input placeholder={item.placeholder} />}
            </Form.Item>
          );
        })}
      </Form>
    </>
  );
};

export default XHform;
